<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2025-07-02 21:24:08
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-09-18 10:44:49
-->
<template>
  <view class="search-container d-flex flex-row justify-content-between align-items-center">
    <view class="search-box d-flex flex-row justify-content-between align-items-center" @click="onSearchClick">
      <view class="search-input d-flex justify-content-start align-items-center">
        <view class="search-icon"></view>
        <view class="search-placeholder">{{ placeholder }}</view>
      </view>
      <view class="search-btn"></view>
    </view>
    <view class="kefu-icon" @click="urlJump({ routeType: 2, target: urlTarget })"/>
  </view>
</template>

<script>

export default {
  name: 'SearchBar',
  props: {
    placeholder: {
      type: String,
      default: '搜索手机型号'
    }
  },
  data () {
    return {
      urlTarget:'https%3a%2f%2fszcskjyxgszj.qiyukf.com%2fclient%3fk%3d0e53e1b92d44e6d4ce46772a56d87068%26wp%3d1%26robotShuntSwitch%3d0%26shuntId%3d0%26language%3dzh-cn%26templateId%3d8131497'
    }
  },
  methods: {
    onSearchClick() {
      this.$emit('search')
    }
  }
}
</script>

<style scoped lang="scss">
.search-container {
  align-self: center;
  margin: 32rpx 0 0;
  width: 100%;
}

.search-box {
  background-color: #FFFFFF;
  border-radius: 44rpx;
  height: 80rpx;
  padding: 0 8rpx 0 32rpx;
  width: calc(100% - 96rpx);
  .search-input {
    width: calc(100% - 130rpx);
  }
}

.search-icon {
  width: 48rpx;
  height: 48rpx;
  background: url(https://image.chushouya.com/assets/images/home/icon_search.png) no-repeat;
  background-size: 100% 100%;
}

.search-btn {
  width: 122rpx;
  height: 64rpx;
  background: url(https://image.chushouya.com/assets/images/home/search_button.png) no-repeat;
  background-size: 100% 100%;
}

.search-placeholder {
  overflow-wrap: break-word;
  color: #999;
  font-size: 28rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  width: calc(100% - 64rpx);
  margin-left: 16rpx;
}

.kefu-icon {
  width: 80rpx;
  height: 80rpx;
  background: url(https://image.chushouya.com/assets/images/home/icon_kefu.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}

::v-deep {
  .search-kefu .kefu-icon contact-button{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    opacity:0;
    z-index:88;
  }
}
</style>
